/home/web6047/www/cgi-bin/prj/20180707-SVC（Side View Character）/techtree/[B][A] moveBy/release/canvas

このファイル: /home/web6047/www/cgi-bin/prj/20180707-SVC（Side View Character）/techtree/[B][A] moveBy/release/canvas - snap 20180715.html

1 <!DOCTYPE html>
2 <head>
3 <meta content="text/html; charset=UTF-8" http-equiv="content-type">
4 <title>基本のSVC + moveBy</title>
5 <script>
6
7 console.clear();
8 console.log( "=============== script ==============" );

9 function $( id ) { return document.getElementById( id ); }

10 var HereDocument = /\/\*\s*([^]*?)\s*\*\//;
11 // usage: var txt = ( function() { /*multiTXT*/ } ).toString().match( HereDocument )[ 1 ];
12
13
14 var cc; //Canvas Context
15
16 //---loading.
17 var images = {
18 red : "red.png",
19 green : "green.png",
20 blue : "blue.png",
21 };
22 var onloadCount = 0;
23 var onloadMax = Object.keys( images ).length + 1;
24 for( var name in images ) {
25 var src = images[ name ];
26 images[ name ] = new Image();
27 images[ name ].onload = onloadx;
28 images[ name ].src = src;
29 }
30 addEventListener( "load", onloadx );

31 function onloadx( e ) {
32 onloadCount++;
33 console.log( onloadCount + "/" + onloadMax );
34 if( onloadCount == onloadMax ) start();
35 }

36 //---/loading.
37

38 function start() {
39
40 canvasEL = $( "canvasELID" );
41 canvas = canvasEL.getContext( '2d' );
42 screenW = canvas.canvas.width;
43 screenH = canvas.canvas.height;
44
45 //(canvas-Special resize / crisp low)
46
47 //各SVC作成
48 with( svc1 = new SVC( "red" ) ) {
49 image = images.red;
50 relativeX = 50;
51 relativeY = 50;
52 offsetX = -41;
53 offsetY = -41;
54 relativeT = 3.14 / 8;
55 }
56 with( svc2 = new SVC( "green" ) ) {
57 image = images.green;
58 relativeX = 118;
59 relativeY = 0;
60 offsetX = -41;
61 offsetY = -41;
62 relativeT = 3.14 / 8;
63 }
64 with( svc3 = new SVC( "blue" ) ) {
65 image = images.blue;
66 relativeX = 118;
67 relativeY = 0;
68 offsetX = -41;
69 offsetY = -41;
70 relativeT = 3.14 / 8;
71 }
72
73 //親子関係
74 svc1.childrenPush( svc2 );
75 svc2.childrenPush( svc3 );
76
77 //svc2（緑）が画面の中央にくるように、svc1（赤）を移動。
78 svc1.moveBy( svc2, screenW / 2, screenH / 2 );
79
80
81 //描画
82 draw( canvas );
83 }

84 function draw( cc ) {
85 cc.clearRect( 0, 0, cc.canvas.width, cc.canvas.height );
86
87 //グラフ的なガイド線
88 cc.strokeStyle = "gray";
89 cc.beginPath();
90 cc.moveTo( 0, screenH / 2 );
91 cc.lineTo( screenW, screenH / 2 );
92 cc.stroke();
93 cc.beginPath();
94 cc.moveTo( screenW / 2, 0 );
95 cc.lineTo( screenW / 2, screenH );
96 cc.stroke();
97
98 svc1.draw( cc );
99 }

100

101 function SVC( name ) {
102 this.name = name;
103 this.image = null;
104 this.relativeX = 0; //親から見た位置（原点となる）
105 this.relativeY = 0;
106 this.relativeT = 0; //親から見た回転量(T is theta)
107 this.offsetX = 0; //画像を描く位置（原点からの位置）
108 this.offsetY = 0;
109 this.children = new Array(); //子
110 }

111 SVC.prototype.childrenPush = function( child ) {
112 this.children.push( child );
113 child.parent = this;
114 }

115 SVC.prototype.getAbsolute = function() {
116 /*
117 親へ向かってさかのぼる方法で、絶対座標を計算する。
118 */
119 var absolute = new Object();
120 if( this.parent == null ) {
121 absolute.x = this.relativeX;
122 absolute.y = this.relativeY;
123 absolute.t = this.relativeT;
124 } else {
125 var pAbsolute = this.parent.getAbsolute();
126 var kaitenRel = kaiten( this.relativeX, this.relativeY, pAbsolute.t );
127 absolute.x = pAbsolute.x + kaitenRel.X;
128 absolute.y = pAbsolute.y + kaitenRel.Y;
129 absolute.t = pAbsolute.t + this.relativeT;
130 }
131 return absolute;
132 }

133 SVC.prototype.moveBy = function( targetSVC, goAbsoluteX, goAbsoluteY ) {
134 /*
135 targetSVCがgoAbsoluteX,Yにくるように、このSVCを移動する。
136 */
137 var targetAbsolute = targetSVC.getAbsolute();
138 var diffX = goAbsoluteX - targetAbsolute.x;
139 var diffY = goAbsoluteY - targetAbsolute.y;
140 this.relativeX += diffX;
141 this.relativeY += diffY;
142 }

143 SVC.prototype.draw = function( cc ) { //cc is canvas context.
144 console.log( "draw", this.name );
145
146 cc.save();
147 cc.translate( this.relativeX, this.relativeY );
148 cc.rotate( this.relativeT );
149
150 //自分を描画
151 cc.drawImage( this.image, this.offsetX, this.offsetY );
152
153 //子を描画
154 for( var i = 0; i < this.children.length; i++ ) {
155 this.children[ i ].draw( cc );
156 }
157
158 cc.restore();
159 }

160 function kaiten( x, y, theta2 ) {
161 //数学　回転計算
162 var theta1 = Math.abs( y, x );
163 var hankei = Math.sqrt( x * x + y * y );
164 var res = new Object();
165 res.X = Math.cos( theta1 + theta2 ) * hankei;
166 res.Y = Math.sin( theta1 + theta2 ) * hankei;
167 return res;
168 }

169 </script>
170 <style>
171 </style>
172 </head>
173 <body style="
174 background-color : lightgray;
175 ">
176 <canvas id="canvasELID" width="512" height="448" style="
177 display : block;
178 margin : auto;
179 background-color : white;
180 border : solid 4px white;
181 border-radius : 4px;
182 box-shadow : -1px -1px 0px black inset,
183 1px 1px 0px black inset,
184 -1px -1px 0px black,
185 1px -1px 0px black,
186 -1px 1px 0px black,
187 1px 1px 0px black;
188
189 ">There is no canvas.</canvas>
190 <div style="text-align:center;">
191 svc2（緑）が画面の中央にくるように、svc1（赤）を移動（moveBy）。
192 </div>
193 </body>
194 </html>